<template>
  <div class="searchVideo">
    <div class="tip">找到{{ videoCount }}个视频</div>
    <div class="listVideo">
      <video-list :videomv="searchVideoList.mvs"></video-list>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="videoCount"
        @current-change="pageChange"
        :current-page="currentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import VideoList from "../../../components/video/VideoList.vue";
export default {
  name: "Searchvideo",
  components: {
    VideoList,
  },
  data() {
    return {
      videoCount: 0,
      searchVideoList: {},
      currentPage: 1,
    };
  },

  created() {
    this.getSearchVideo();
  },

  methods: {
    // 获取视频列表
    async getSearchVideo() {
      const { data: res } = await this.$http("cloudsearch", {
        params: {
          keywords: this.$route.params.id,
          type: 1004,
          offset: 30 * (this.currentPage - 1),
        },
      });
      console.log(res);
      this.videoCount = res.result.mvCount;
      this.searchVideoList = res.result;
    },
    // 点击翻页事件
    pageChange(page) {
      this.currentPage = page;
      this.searchVideoList = [];
      this.getSearchVideo();
    },
  },
};
</script>

<style lang="less" scoped>
.searchVideo {
  width: 90%;
  margin: 0 auto;
}
.tip {
  font-size: 20px;
  font-weight: 700;
}
.page {
  width: 40%;
  margin: 0 auto;
  height: 100px;
  margin-bottom: 2px;
}
</style>